<template>
  <!--  <el-dialog v-model="drawer" :close-on-click-modal="false" destroy-on-close width="60%" @close="closeMatter" title="方案">-->
  <!-- <el-form :model="formData" :rules="formRules" size="small" :inline="false" label-width="100px">
    <el-form-item label="事项主题" prop="title">
      <el-input v-model="formData.title" placeholder="请填写事项主题" maxlength="32" clearable/>
    </el-form-item>
    <el-form-item label="事项描述" prop="content">
      <editor v-model="formData.content" height="160px"/>
    </el-form-item>
    <el-form-item label="完成期限">
      <div style="max-width: 400px">
        <el-date-picker v-if="dateType" v-model="dateTime" style="width: 100%" type="datetimerange" range-separator="至"
                        start-placeholder="行动开始时间" end-placeholder="行动结束时间" value-format="YYYY-MM-DD HH:mm:ss" @change="selectTime"/>
        <el-date-picker v-else v-model="formData.actionStartTime" type="datetime" style="width: 100%"
                        value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择行动时间"/>
      </div>
      <el-button style="margin-left: 10px" plain :icon="Refresh" @click="dateType = !dateType"/>
    </el-form-item>
    <el-form-item label="执行人" prop="executorIds">
      <el-select v-model="formData.executorIds" placeholder="请选择执行人" size="small" multiple filterable style="width: 100%" @change="executorChange">
        <el-option v-for="item in enterpriseUsers" :key="item.userId" :value="item.userId" :label="item.nickname"/>
      </el-select>
    </el-form-item>
    <el-form-item label="关联">
      <module-relate :relate-items="formData.relateItems"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="formData.remark" :rows="3" type="textarea" placeholder="请填写备注"/>
    </el-form-item>
    <el-form-item label="优先度">
      <el-radio-group v-model="formData.priority" size="small">
        <el-radio :label="0" size="small">普通</el-radio>
        <el-radio :label="1" size="small">高</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="通知时间" prop="remindState">
      <el-radio-group v-model="formData.remindState">
        <el-radio v-for="item in remindTimes" :key="item.value" :label="item.value" size="small">{{item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="通知方式" prop="remindType">
      <el-checkbox-group v-model="formData.remindType" size="small">
        <el-checkbox label="1">应用、公众号通知</el-checkbox>
        <el-checkbox label="2">短信通知</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="文档">
      <Document style="margin-left: 30px;" v-if="drawer" :file-group="formData.type" v-model:resultList="resultList" :limit="9"/>
    </el-form-item>
  </el-form> -->
  <scheme-form ref="form" :code="code" :relateItem="relateItem" :enterpriseUsers="enterpriseUsers" :remindTimes="remindTimes"></scheme-form>
  <el-row justify="end">
    <el-button size="large" @click="closeMatter">取消</el-button>
    <el-button @click="submitData" type="primary" size="large">提交</el-button>
  </el-row>
  <!--    <template #footer>-->
  <!--      <div class="dialog-footer">-->
  <!--        <el-button size="large" @click="closeMatter">取消</el-button>-->
  <!--        <el-button @click="submitData" type="primary" size="large">提交</el-button>-->
  <!--      </div>-->
  <!--    </template>-->
  <!--  </el-dialog>-->
</template>

<script>
// 方案事项 SCHEME
// import Cookies from 'js-cookie'
// import {createMatterJust} from '/@/api/matter'
import {computed, reactive, toRefs, ref} from 'vue'
// import Editor from '/@/components/editor/index.vue'
// import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
// import {ElMessage} from 'element-plus'
// import {Refresh} from '@element-plus/icons-vue'
// import api from '/@/api/commonApi'
// import {formatDate} from '/@/utils/formatTime'
// import Document from '/@/components/document/index.vue'
import SchemeForm from '/@/views/matter/components/SchemeForm.vue'

export default {
  name: 'Scheme',
  emits: ['update:code'],
  components: {
    // Editor,
    // ModuleRelate,
    // Document
    SchemeForm
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    relateItem: {
      type: Object,
      default: null
    },
    enterpriseUsers: {
      type: Array,
      default: []
    },
    remindTimes: {
      type: Array,
      default: []
    }
  },
  setup(props, context) {
    const form = ref()
    // const {code, relateItem, enterpriseUsers, remindTimes} = toRefs(props)
    // const drawer = computed({
    //   get: () => {
    //     let flag = code.value == 'SCHEME'
    //     // if (flag) {
    //     //   // 默认带入自己
    //     //   state.selfId = Cookies.get('userId')
    //     //   state.formData.executorIds = [state.selfId]
    //     //   // 行动时间默认现在
    //     //   let nowTime = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS')
    //     //   state.formData.actionStartTime = nowTime
    //     //   state.dateTime = [nowTime, nowTime]
    //     //   if (relateItem.value) {   // 关联项带入
    //     //     state.formData.relateItems = [relateItem.value]
    //     //   }
    //     // }
    //     return flag
    //   },
    //   set: val => context.emit('update:code', val ? 'SCHEME' : '')
    // })
    // const state = reactive({
    //   resultList: [], // 返回的数据
    //   formData: {
    //     title: '方案',
    //     content: '',
    //     actionStartTime: null,
    //     actionEndTime: null,
    //     executorIds: [],
    //     relateItems: [],
    //     remark: null,
    //     attach: '',
    //     attachNames: '',
    //     priority: 0,
    //     remindState: 'NONE',
    //     remindType: [],
    //     type: 'SCHEME'
    //   },
    //   formRules: {
    //     title: {required: true, message: '请填写事项主题', trigger: 'blur'}
    //   },
    //   dateType: false,  // 行动时间范围/单时间切换
    //   dateTime: [],
    //   selfId: null
    // })

    // const selectTime = (val) => {
    //   if (val && val.length === 2) {
    //     state.formData.actionStartTime = val[0]
    //     state.formData.actionEndTime = val[1]
    //   } else {
    //     state.formData.actionStartTime = state.formData.actionEndTime = null
    //   }
    // }
    // const executorChange = (val) => {
    //   if (!val.includes(state.selfId)) {
    //     state.formData.executorIds.push(state.selfId)
    //     ElMessage.warning('本人必须在执行人中，无法移除')
    //   }
    // }
    /**
     * 提交事项
     */
    const submitData = () => {
      form.value.submit()
      // formEl.validate(valid => {
      //   if (!valid) {
      //     return false
      //   }

      //   let params = Object.assign({}, state.formData)
      //   // 列表转逗号分割字符串提交
      //   state.formData.remindType = params.remindType + ''
      //   if (state.resultList.length > 0) {  // 组装附件地址和名称
      //     for (let i = 0; i < state.resultList.length; i++) {
      //       let item = state.resultList[i]
      //       state.formData.attach += item.src
      //       state.formData.attachNames += item.name
      //       if (i < state.resultList.length - 1) {
      //         state.formData.attach += ','
      //         state.formData.attachNames += '，'
      //       }
      //     }
      //   }

      //   // TODO
      //   // 1、调取接口完成后关闭
      //   createMatterJust(state.formData).then(res => {
      //     if (res.data) {
      //       ElMessage.success('提交成功')
      //       reset()
      //       // 关联事项主键
      //       let data = state.resultList.map(item => {
      //         item.matterId = res.data.agendaMatterId
      //         item.matterName = res.data.title
      //         return item
      //       })
      //       api.fileRelevanceModule(data)
      //       closeMatter()
      //     }
      //   }).catch(e => console.log(e))
      // })
    }
    const closeMatter = () => {
      reset()
      context.emit('update:code', '')
    }
    // 重置
    const reset = () => {
      // state.formData = {
      //   title: '方案',
      //   content: '',
      //   actionStartTime: null,
      //   actionEndTime: null,
      //   executorIds: [],
      //   relateItems: [],
      //   remark: null,
      //   attach: '',
      //   attachNames: '',
      //   priority: 0,
      //   remindState: 'NONE',
      //   remindType: [],
      //   type: 'SCHEME'  // 事项类型编码
      // }
      form.value.reset()
    }

    return {
      form,
      // ...toRefs(state),
      submitData,
      // selectTime,
      // drawer,
      // executorChange,
      // Refresh,
      // enterpriseUsers,
      // remindTimes,
      closeMatter
    }
  }
}
</script>

<style lang="scss" scoped></style>
